<template>
	<view class="content">		
		<view class="list">
			<view class="title">
				<text>编号</text>
				<text>品种</text>
				<text>体温</text>
				<text>体脂</text>
				<text>详情</text>
			</view>
			<view class="item" v-for="item in list" :key="item.id">
				<text>{{item.id}}</text>
				<text>{{item.type}}</text>
				<text>{{item.temperature}}度</text>
				<text>{{item.fat}}%</text>
				<button @tap="toPigDetail(item.id)">跳转</button>				
			</view>
		</view>
		<button @tap="back()" class="back">返回</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {  
			...mapState(['msgs','count'])  
		}, 		
		data() {
			return {
				index:0,
				flag:true,
				list:[
					{
						"id":"0021",
						"type":"绿毛猪",
						"temperature":"36.0",
						"fat":"36",
						temperatures: {
							//数字的图--折线图数据
							categories: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
							series: [
								{ name: '体温', data: [36.1, 36.2, 36.4, 36.9, 36.6,  36.5] }
							]
						},				
						fats: {
							//数字的图--折线图数据
							categories: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日'],
							series: [
								{ name: '体脂', data: [0.11, 0.2, 0.4, 0.3, 0.6, 0.7] },
							]
						},
					},
					{	
						"id":"0045",
						"type":"紫毛猪",
						"temperature":"37.0",
						"fat":"46",
						temperatures: {
							//数字的图--折线图数据
							categories: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
							series: [
								{ name: '体温', data: [36.5, 36.2, 36.3, 36.9, 36.7,  36.2] }
							]
						},				
						fats: {
							//数字的图--折线图数据
							categories: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日'],
							series: [
								{ name: '体脂', data: [0.31, 0.52, 0.64, 0.23, 0.46, 0.97] },
							]
						},
					},
					{
						"id":"0225",
						"type":"蓝毛猪",
						"temperature":"36.0",
						"fat":"36",
						temperatures: {
							//数字的图--折线图数据
							categories: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
							series: [
								{ name: '体温', data: [36.5, 36.6, 36.7, 36.1, 36.9,  36.3] }
							]
						},				
						fats: {
							//数字的图--折线图数据
							categories: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日'],
							series: [
								{ name: '体脂', data: [0.21, 0.12, 0.41, 0.33, 0.56, 0.17] },
							]
						},
					},
					{	
						"id":"0115",
						"type":"黄毛猪",
						"temperature":"37.0",
						"fat":"46",
						temperatures: {
							//数字的图--折线图数据
							categories: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
							series: [
								{ name: '体温', data: [36.7, 36.6, 36.2, 36.3, 36.1,  36.7] }
							]
						},				
						fats: {
							//数字的图--折线图数据
							categories: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日'],
							series: [
								{ name: '体脂', data: [0.41, 0.22, 0.44, 0.53, 0.26, 0.77] },
							]
						},
					},
					{	
						"id":"0025",
						"type":"黑毛猪",
						"temperature":"36.0",
						"fat":"36",
						"target":"73"
					},
					{	
						"id":"0015",
						"type":"白毛猪",
						"temperature":"37.0",
						"fat":"46",
						temperatures: {
							//数字的图--折线图数据
							categories: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
							series: [
								{ name: '体温', data: [36.4, 36.3, 36.5, 36.6, 36.2,  36.9] }
							]
						},				
						fats: {
							//数字的图--折线图数据
							categories: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日'],
							series: [
								{ name: '体脂', data: [0.71, 0.8, 0.16, 0.36, 0.44, 0.2] },
							]
						},
					}
				]
			}
		},
		onLoad() {

			
		},
		onShow() {
			this.flag=true;
			this.test2();	
		},
		methods: {
			...mapMutations(['plusCount','addMsg']),			
			back(){
				this.flag=false;
				uni.reLaunch({
					url:"../factory"
				})
			},
			getServerData() {
			},
			toPigDetail(id){
				this.flag=false;
				uni.navigateTo({
					url: 'pig-detail/pig-detail?id='+id,
				})
			},
			test2(){
				setTimeout(()=>{
					this.list[2].temperature=39.9.toString();

					let msg=this.list[2].id+"号猪的体温过高,疑似发烧，请尽快隔离！";
					this.addMsg(msg);
					this.plusCount();
					// uni.setTabBarBadge({
					//   index: 2,
					//   text: this.count.toString()
					// })	
					uni.showModal({
						title:"警告",
						content:this.list[2].id+"号猪的体温过高,疑似发烧，请尽快隔离！",
						cancelText:"忽略",
						cancelColor:"#c8c8c8",
						success: (res) => {
							
							if (res.confirm) {
								setTimeout(()=>{
									this.test3();
								},2000);
								return;
							} else if (res.cancel) {
								setTimeout(()=>{
									this.test3();
								},2000);
								return;
							}														
						}
					})
				},2000); 
				
			},
			test3(){
				this.list[3].temperature=37.4.toString();
				let msg=this.list[3].id+"号猪的发情了，预测最佳配种时间为2020-07-26 9:00～14:00，请及时配种！";
				//this.plusCount();
				this.addMsg(msg);
				this.plusCount();
					uni.showModal({
						title:"警告",
						content:this.list[3].id+"号猪的发情了，预测最佳配种时间为2020-07-26 9:00～14:00，请及时配种！",
						cancelText:"忽略",
						cancelColor:"#c8c8c8",
						success: (res) => {
							
							if (res.confirm) {
								return;
							} else if (res.cancel) {
								return;
							}														
						}
					})				
			},
			test(){
				if(this.flag==false)return;
				if(this.index>this.list.length-1){
					this.index=0;
				}
				let tmp=Number(this.list[this.index].temperature)+0.2;
					
				if(tmp>38){
					this.flag=false;
				}
				if(tmp>=37){
					this.flag=false;
					uni.showModal({
						title:"警告",
						content:this.list[this.index].id+"号猪的体温异常",
						cancelText:"忽略",
						cancelColor:"#c8c8c8",
						success: (res) => {
							
							if (res.confirm) {
								this.flag=true;
								this.test();
							} else if (res.cancel) {
								this.flag=true;
								this.test();
							}														
						}
					})
				}
				this.list[this.index].temperature=tmp.toFixed(1);
				this.index++;
				setTimeout(()=>{
					this.test();
				},2000);  
			},
		}
	}
</script>

<style scoped>
	.content{
		margin: 0 0;
	}
	.list{
		display: flex;
		flex-direction: column;
	}
	.list view{
		padding-left: 5%;
		display: flex;

		margin: 0 2%;
	}
		
	.title{
		background: #89c997;
	}
	.list view text{
		width: 30%;
		
	}
		
	.title{
		color: #FFFFFF;
	}
	
	.item{
		background: #4ab7ff;
		color: #FFFFFF;
		border-bottom: #fff solid 1px;
	}
	.item button{
		width: 20%;
		height: 20px;
		font-size: 10px;
		padding-bottom: 8%;
		margin: 1% 2% 1% 1%;
	}
	
	.back{
		background: #86d997;
		color: #FFFFFF;
		width: 50%;
		height: 48px;
		font-size: 20px;
		margin-top: 10%;
		padding-bottom: 8%;
	}
</style>
